<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!--/*@thymesVar id="title" type="templates"*/-->
    <title th:text="${title}">默认的标题</title>
    <link rel="stylesheet" th:href="@{/static/layui/js/css/layui.css}">
    <script th:src="@{/static/layui/js/layui.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/vue.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/axios.min.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/jquery/jquery.js}" charset="UTF-8" type="text/javascript"></script>
    <style>
        .layui-bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <ul class="layui-nav layui-header" lay-bar="disabled" >
        <li class="layui-nav-item layui-nav-itemed ">
            <span>
                <span class="layui-font-20" >
                    访客信息管理平台
                </span>
                <span class="layui-hide-xs"></span>

            </span>

        </li>
        <li class="layui-nav-item layui-layout-right " style="margin-right: 80px">
            <span class="layui-circle layui-badge-rim " >
                <i class="layui-icon layui-icon-username " style="margin-right: 13px"></i>
                 <span class="layui-badge-dot layui-bg-green" style="margin-left: -12px"></span>
            </span>

            <span th:inline="text">管理员ID：[[${stp.getLoginId()}]]</span>



            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd>
                    <a th:href="@{/admin/logout}">
                        <i class=" layui-icon layui-icon-logout"></i>
                        退出登录
                    </a>
                </dd>
            </dl>
        </li>

    </ul>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item ">
                    <a class="layui-icon layui-icon-auz" th:href="@{/admin/index/authorize}">授权管理</a>

                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="layui-icon layui-icon-console" th:href="@{/admin/index/supervision}">访问监管</a>
                </li>
                <li class="layui-nav-item">
                    <a class="layui-icon layui-icon-set-fill" th:href="@{/admin/index/mng}">管理员信息管理</a>
                </li>

            </ul>
        </div>
    </div>


<!--右侧业务界面-->
    <div class="layui-body" >
        <div  class="layui-nav layui-bg-green">
            <ul  >
                <li class="layui-nav-item ">
                    <a class="layui-icon layui-icon-log"  th:href="@{/admin/index/supervision/log}">访问记录</a>

                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="layui-icon layui-icon-log layui-icon-password"  th:href="@{/admin/index/supervision/control}">访问控制</a>

                </li>

                <li class="layui-nav-item">
                    <a class="layui-icon layui-icon-website" th:href="@{/admin/index/supervision/float}">流量监控</a>
                </li>
            </ul>
        </div>



        <div class="layui-form"  >

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">受限用户</li>
                    <li>自由用户</li>

                </ul>
                <!--容器卡片-->
                <div class="layui-tab-content" style="height: 100px;">
                    <!--卡片1 已控用户-->
                    <div class="layui-tab-item layui-show" id="selectControlSubmit">
                        <div class="layui-form-item">
                        <div class="layui-btn-group layui-inline" style="margin-top: 10px; margin-left: 10px" >
                            <button
                                    class="layui-font-14 layui-bold layui-btn layui-btn-normal layui-btn-danger"
                                    @click="deleteControlClick"
                            >
                                <i class="layui-icon">&#xe640;</i>
                            </button>


                            <button
                                    class="layui-font-14 layui-bold layui-btn  "
                                   @click="controlModify"
                            >
                                <i class="layui-icon">&#xe642;</i>
                            </button>

                            <button
                                    class="layui-font-14 layui-bold layui-btn  "
                                    id="flushControlButton"
                            >
                                <i class="layui-icon">&#xe669;</i>
                            </button>


                            <button
                                    class="layui-font-14 layui-bold layui-btn  "
                                    @click="selectControlClick"
                            >
                                <i class="layui-icon">&#xe615;</i>
                            </button>



                        </div>

                        <div class="layui-inline" style="margin-top: 10px;">
                            <input type="radio"
                                   value="byName"
                                   name="userChoice"
                                   title="用户名"
                                   checked

                            >

                            <input type="radio"
                                   name="userChoice"
                                   value="byId"
                                   title="用户id"

                            >


                        </div>
                        <div class="layui-inline" style="margin-top: 10px;">
                            <input type="text"
                                   v-model:value="message"
                                   required
                                   lay-verify="required"
                                   placeholder="请输入有关信息"
                                   autocomplete="off"
                                   class="layui-input"
                                   style="width: 200px"

                            />
                        </div>



                        <div class="layui-inline" style="margin-top: 10px;">

                            <div class="layui-inline" style="margin-left: 30px">
                                <input type="radio"
                                       name="userChoice"
                                       value="byDate"
                                       title="日期范围"

                                />
                            </div>


                            <div class="layui-inline" id="dateRangeControl" style="margin-left: -10px">

                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" id="startDateControl" class="layui-input" placeholder="开始日期">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" id="endDateControl" class="layui-input" placeholder="结束日期">
                                </div>
                            </div>
                        </div>
                        </div>
                        <!--数据表-->
                        <div >
                            <table class="layui-table"  id="dataTableControl" style="margin-top: -10px;" lay-size="lg" lay-filter="dataTableControl"></table>
                        </div>
                    </div>


                    <!--卡片2 未控用户-->
                    <div class="layui-tab-item" id="selectUnControlSubmit">
                        <div class="layui-form-item">
                            <div class="layui-btn-group layui-inline" style="margin-top: 10px; margin-left: 10px" >

                                <button
                                        class="layui-font-14 layui-bold layui-btn  "
                                        @click="addcontrol"
                                >
                                    <i class="layui-icon">&#xe624;</i>
                                </button>

                                <button
                                        class="layui-font-14 layui-bold layui-btn  "
                                        id="flushUnControlButton"
                                >
                                    <i class="layui-icon">&#xe669;</i>
                                </button>


                                <button
                                        class="layui-font-14 layui-bold layui-btn  "
                                        @click="selectUnControlClick"
                                >
                                    <i class="layui-icon">&#xe615;</i>
                                </button>



                            </div>

                            <div class="layui-inline" style="margin-top: 10px;">
                                <input type="radio"
                                       value="byName"
                                       name="userUnControlChoice"
                                       title="用户名"
                                       checked

                                >

                                <input type="radio"
                                       name="userUnControlChoice"
                                       value="byId"
                                       title="用户id"

                                >


                            </div>
                            <div class="layui-inline" style="margin-top: 10px;">
                                <input type="text"
                                       v-model:value="message"
                                       required
                                       lay-verify="required"
                                       placeholder="请输入有关信息"
                                       autocomplete="off"
                                       class="layui-input"
                                       style="width: 200px"

                                />
                            </div>




                        </div>
                        <!--数据表-->
                        <div >
                            <table class="layui-table"  id="dataTableUnControl" style="margin-top: -10px;" lay-size="lg" lay-filter="dataTableUnControl"></table>
                        </div>
                    </div>
                    </div>
                </div>


            </div>


        </div>


    </div>



</div>






<!-------------------------------------------------表单提交--------------------------------------------------------------->

<!--已控用户数据源-->
<!--表格数据源--> <!--restful风格 ： /index/supervision/control/controlvisitors 方法：get-->
<form th:action="@{/admin/index/supervision/control/controlvisitors}" id="dataSourceControl"></form>

<!--查找-->       <!--restful风格 ： /index/supervision/control/controlvisitors/byId(byName|byDate)/id号(用户名|开始日期/终止日期) 方法：get-->
<form th:action="@{/admin/index/supervision/control/controlvisitors/}" id="selectControlVisitor"  method="get" >
</form>
<!--删除-->       <!--restful风格 ： /index/supervision/control/controlvisitors号方法：delete-->
<form th:action="@{/admin/index/supervision/control/controlvisitors}" id="deleteControlVisitor" method="post">
</form>

<!--修改-->       <!--restful风格 ： /index/supervision/control/controlvisitors 方法：post-->
<form th:action="@{/admin/index/supervision/control/controlvisitors}" id="modifyControlVisitor"  method="post" >
</form>

<!--自由用户数据源-->
<!--表格数据源--> <!--restful风格 ： /index/supervision/control/uncontrolvisitors 方法：get-->
<form th:action="@{/admin/index/supervision/control/uncontrolvisitors}" id="dataSourceUnControl"></form>

<!--查找-->       <!--restful风格 ： /index/supervision/control/uncontrolvisitors/byId(byName)/id号(用户名) 方法：get-->
<form th:action="@{/admin/index/supervision/control/uncontrolvisitors/}" id="selectUnControlVisitor"  method="get" >
</form>
<!--添加-->       <!--restful风格 ： /index/supervision/control/uncontrolvisitors号方法：put-->
<form th:action="@{/admin/index/supervision/control/uncontrolvisitors}" id="deleteUnControlVisitor" method="post">
</form>




<!--受限用户编辑弹出层-->
<div id="openEditControlProductBox" style="display: none; padding: 10px;">
    <form class="layui-form layui-form-pane" action="" lay-filter="modify_View_editControl" pane style="margin-left: 30px;margin-top: 10px" >
        <div id="modify_View_editControl">
            <div class="layui-form-item" id="editDateRange">
                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="editStartDate" class="layui-input" placeholder="开始日期">
                    </div>

                </div>

                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label" >结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="editEndDate" class="layui-input" placeholder="结束日期">
                    </div>

                </div>
            </div>
            <div class=" layui-form-item layui-input-block " >
                <div class="layui-btn-container " >
                    <button class="layui-btn layui-btn-primary" type="button" id="editCancel">
                        取消
                    </button>
                    <button class="layui-btn lay-submit"  type="button"  @click="editCheckAndSubmit">
                        提交
                    </button>
                </div>

            </div>
        </div>

    </form>
</div>

<!--自由用户操作工具栏-->
<script type="text/html" id="uncontrolBar">
    <a class="layui-btn  layui-btn-danger" lay-event="addControl">限制访问</a>
</script>

<!--自由用户添加弹出层-->
<div id="openAddControlProductBox" style="display: none; padding: 10px;">
    <form class="layui-form layui-form-pane" action="" lay-filter="modify_View_addControl" pane style="margin-left: 30px;margin-top: 10px" >
        <div id="modify_View_addControl">
            <div class="layui-form-item" id="addDateRange">
                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="addStartDate" class="layui-input" placeholder="开始日期">
                    </div>

                </div>

                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label" >结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="addEndDate" class="layui-input" placeholder="结束日期">
                    </div>

                </div>
            </div>
            <div class=" layui-form-item layui-input-block " >
                <div class="layui-btn-container " >
                    <button class="layui-btn layui-btn-primary" type="button" id="addCancel">
                        取消
                    </button>
                    <button class="layui-btn lay-submit"  type="button"  @click="addCheckAndSubmit">
                        提交
                    </button>
                </div>

            </div>
        </div>

    </form>
</div>







<!--引入外部脚本文件-->
<script type="text/javascript" th:src="@{/static/pageStrape2_2.js}"></script>

</body>


</html>